import React, { useCallback } from 'react'
import { NavBar, Switch } from 'antd-mobile'
import { useDispatch, useSelector } from 'react-redux'
import { switchCheck } from '@/views/home'

import { MoreWrap } from './StyledMore'

function More(props) {
  const checked = useSelector(state => state.getIn(['map', 'checked']))
  const dispatch = useDispatch()

  const handleChange = useCallback(
    (checked) => {
      dispatch(switchCheck(checked))
    },
    [dispatch],
  )

  return (
    <MoreWrap>
      <NavBar
        mode="dark"
      >更多</NavBar>
      <div className="switch-maptab">
        显示地图：
        <Switch
          checked={checked}
          onChange={handleChange}
        ></Switch>
      </div>
    </MoreWrap>
  )
}

export default More
